<template id="dialog-selectExcelHeader">
	<v-dialog v-model="dialog" persistent max-width="600px">
		<v-card>
			<v-card-title class="text-h5"> 选择字段 </v-card-title>
			<v-treeview selectable :items="cHeader" item-key="key" v-model="selectValue"></v-treeview>
			<v-divider></v-divider>

			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn color="primary" text @click="handleConfirm"> 确认 </v-btn>
				<v-btn text @click="close"> 取消 </v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script type="module">
	Vue.component("dialog-selectExcelHeader", {
		template: "#dialog-selectExcelHeader",
		props: {
			headers:Array
		},
		data: () => ({
			dialog: false,
			selectValue:[]
		}),
		computed: {
			cHeader() {
				let header = [
					{
						name: "全部",
						key: "all",
						id:1,
						children: [],
					},
				];
				let newHeader = this.headers
					.filter(item => item.text != "操作")
					.map((item,index) => {
						return {
							id:2+index,
							name: item.text,
							key: item.value,
						};
					});
				header[0].children.push(...newHeader);
				return header
			},
		},
		watch: {},
		async created() {},
		async mounted() {},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "open":
						await this.open(uiActionData);
						break;
					case "close":
						await this.close();
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},

			async open() {
				this.dialog = true;
			},
			async handleConfirm(){
				if(this.selectValue.length > 0){
					this.$emit("onData",{column:_.cloneDeep(this.selectValue)})
				}
                this.close()
			},
			async close() {
				this.dialog = false;
				this.selectValue = []
			},
		},
	});
</script>
<style scoped="">
	.upload-box {
		width: 200px;
		height: 200px;
		padding-top: 60px;
		border: 1px dashed #8c939d;
		border-radius: 5px;
		background-color: #fbfdff;
	}
	.mdi-plus:before {
		/* content: "\F39A"; */
		color: #8c939d;
		font-size: 40px;
	}
	.v-input {
		justify-content: center;
	}
	.files {
		color: #4caf50;
	}
</style>
